import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import './01style.css'

// 在父元素中使用state去控制子元素props 从而达到父元素数据传递给子元素
class ParentCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isActive: false
    }
    this.clickEvent = this.clickEvent.bind(this)
  }
  clickEvent(e) {
    this.setState({
      isActive: !this.state.isActive
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.clickEvent}>控制子元素显示</button>
        <ChildCom isActive={this.state.isActive} />
      </div>
    )
  }
}

class ChildCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    let strClass = ''
    // active可见 content不可见
    strClass = this.props.isActive ? 'active' : ''
    return (
      <div className={"content " + strClass}>
        <h1>我是子元素</h1>
        {/* { this.props.isActive ? <h1>我是子元素</h1> : <template></template> } */}
      </div>
    )
  }
}
ReactDOM.render(<ParentCom />, document.getElementById("root"))

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


